<!-- 日历 -->
<template>
	<view style="width: 100%;">
		<u--input 
			v-model="valueName"
			@click.native="showPicker"
			:placeholder="placeholder"
			:placeholderClass="placeholderClass"
			:placeholderStyle="placeholderStyle"
			:inputAlign="inputAlign"
			:fontSize="fontSize"
			:color="color"
			:prefixIcon="prefixIcon"
			:prefixIconStyle="prefixIconStyle"
			:suffixIcon="suffixIcon"
			:suffixIconStyle="suffixIconStyle"
			:border="border"
			:shape="shape"
			:customStyle="customStyle"
			disabled
			:disabledColor="disabledColor"
		/>
		<!-- <u-datetime-picker
			:show="pickerShow"
			:minDate="315504000000"
			closeOnClickOverlay
			v-model="timeValue" 
			:mode="mode"
			@confirm="chooseItem"
			@close="pickerShow = false"
			@cancel="pickerShow = false"
		>
		</u-datetime-picker> -->
		<u-calendar :show="pickerShow" :mode="mode" allowSameDay @confirm="chooseItem" @close="pickerShow = false"></u-calendar>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				pickerShow: false, //picker选择器状态
				valueName: '', //所选id 值参数
				timeValue: [],
			}
		},
		model: {
			prop: 'value',
			event: 'change'
		},
		props: {
			value: {
				type: [String, Number, Array],
				default: '',
			},
			disabled: {
				type: [Boolean],
				default: false,
			},
			// 输入框为空时的占位符
			placeholder: {
				type: [String, Number],
				default: '请选择日期',
			},
			mode: {
				type: [String],
				default: 'range',
			},
			// 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
			placeholderClass: {
				type: [String],
				default: '',
			},
			// 指定placeholder的样式，字符串/对象形式，如"color: red;"
			placeholderStyle: {
				type: [String, Object],
				default: 'color: #C0C4CC'
			},
			// 输入框内容对齐方式 - left | center | right
			inputAlign: {
				type: [String,],
				default: 'left',
			},
			// 输入框字体的大小
			fontSize: {
				type: [String, Number],
				default: '15px',
			},
			// 输入框字体颜色
			color: {
				type: [String],
				default: '#303133',
			},
			// 输入框前置图标
			prefixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			prefixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 输入框前置图标
			suffixIcon: {
				type: [String],
				default: '',
			},
			// 前置图标样式，对象或字符串
			suffixIconStyle: {
				type: [String, Object],
				default: '',
			},
			// 边框类型，surround-四周边框，bottom-底部边框，none-无边框
			border: {
				type: [String],
				default: 'surround',
			},
			// 输入框形状，circle-圆形，square-方形
			shape: {
				type: [String],
				default: 'square',
			},
			customStyle: {
				type: [Object],
				default: () => {},
			}
		},
		watch: {
			value: {
				handler (newData) {
					//处理数据
					if(newData){
						this.valueName = newData
						this.timeValue = newData.split('~')
					} else {
						this.valueName = newData
						this.timeValue = []
					}
				},
				immediate: true
			}
		},
		computed: {
			// 当是disabled为true改变禁用的颜色
			disabledColor () {
				if (this.disabled) {
					return '#f5f7fa'
				} else {
					return '#FFFFFF'
				}
			},
		},
		methods: {
			//点击展示
			showPicker() {
				this.pickerShow = true;
			},
			chooseItem(val) {
				// const timeFormat = uni.$u.timeFormat
				this.pickerShow = false
				this.$emit('value-change', val)
				if (this.mode === 'single') {
					this.valueName = val[0]
				}
				if (this.mode === 'range') {
					this.valueName = val[0] + '~' + val[val.length - 1]
				}
				// if (this.mode == 'date') {
				// 	this.valueName = timeFormat(val.value, 'yyyy-mm-dd')
				// 	this.$emit('change', timeFormat(val.value, 'yyyy-mm-dd'))
				// } else {
				// 	this.valueName = timeFormat(val.value, 'yyyy-mm-dd hh:MM:ss')
				// 	this.$emit('change', timeFormat(val.value, 'yyyy-mm-dd hh:MM:ss'))
				// }
				
			}
		},
	}
</script>
